<template>
  <div>
    <!-- HEADER
            ============================================= -->
    <header id="header" class="header fixed-top">
      <nav
        class="navbar navbar-expand-lg roiton-menu"
        :class="'navbar-' + headerStyle"
      >
        <div class="container">
          <!-- LOGO NAME -->
          <router-link to="/index">
            <a href="javascript:;" class="navbar-brand">智慧博客</a>
          </router-link>
          <!-- Responsive Menu Button -->
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-bar-icon"><i class="lni-menu"></i></span>
          </button>

          <!-- Navigation Menu -->
          <div
            id="navbarSupportedContent"
            class="collapse navbar-collapse"
            style="display: flex;align-items:center;"
          >
            <!-- <ul class="navbar-nav ml-auto"> -->
            <ul class="navbar-nav">
              <!-- Dropdown Link -->
              <li class="nav-item dropdown">
                <a
                  class="nav-link "
                  href="javascript:;"
                  id="navbarDropdownMenuLink"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  智能问答
                </a>

                <ul
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink"
                >
                  <li>
                    <router-link to="/blog-questions">
                      <a class="dropdown-item" href="javascript:;">智慧问答</a>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/blog-headline">
                      <a class="dropdown-item" href="javascript:;">今日头条</a>
                    </router-link>
                  </li>
                  <!-- <li><a class="dropdown-item" href="index-03.html">Home 03</a></li>
                                <li><a class="dropdown-item" href="index-01.html">Home 04</a></li> -->
                </ul>
              </li>
              <!-- Dropdown Link -->
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="javascript:;"
                  id="navbarDropdownMenuLink1"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  论坛
                </a>
                <ul
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink1"
                >
                  <li>
                    <router-link to="/portfolio-identification">
                      <a class="dropdown-item" href="javascript:;">药物识别</a>
                    </router-link>
                  </li>

                  <li>
                    <router-link
                      :to="{ path: '/portfolio-avoid', query: { search: '' } }"
                    >
                      <a class="dropdown-item" href="javascript:;">药物禁忌</a>
                    </router-link>
                  </li>

                  <!-- <li><a class="dropdown-item" href="portfolio-4-grid-01.html">Portfolio 4 grid</a></li>

                                <li><a class="dropdown-item" href="portfolio-detail-01.html">Portfolio Detail</a></li> -->
                </ul>
              </li>
              <!-- Dropdown Link -->
              <!-- <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="javascript:;"
                  id="navbarDropdownMenuLink2"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  论坛
                </a>
                <ul
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink2"
                >
                  <li>
                    <router-link to="/space">
                      <a class="dropdown-item" href="javascript:;">个人空间</a>
                    </router-link>
                  </li>
                  <li>
                    <router-link to="/blog-bbs">
                      <a class="dropdown-item" href="javascript:;">论坛讨论</a>
                    </router-link>
                  </li>
                  
                </ul>
              </li> -->
              <!-- Dropdown Link -->
              <!-- <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="javascript:;"
                  id="navbarDropdownMenuLink3"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  养生
                </a>
                <ul
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink3"
                >
                  <li>
                    <router-link to="/blog-keepHealth">
                      <a class="dropdown-item" href="#" target="blank"
                        >中医养生</a
                      >
                    </router-link>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">穴位图</a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">食物禁忌</a>
                  </li>
                  
                </ul>
              </li> -->

              

              <!-- Button -->
              <li class="header-btn" v-if="loginState == 'logining'">
                <a href="sign-in-01.html" class="btn">
                  <span>退出登录</span>
                </a>
              </li>
              <li class="header-btn" v-else-if="loginState == 'toRegister'">
                <router-link to="/register">
                  <a href="sign-in-01.html" class="btn">
                    <span>注册</span>
                  </a>
                </router-link>
              </li>
              <li class="header-btn" v-else>
                <router-link to="/login">
                  <a href="sign-in-01.html" class="btn">
                    登录
                  </a>
                </router-link>
              </li>
            </ul>
          </div>
          <!-- End Navigation Menu -->
        </div>
        <!-- End container -->
      </nav>
      <!-- End navbar -->
    </header>
    <!-- END HEADER -->
  </div>
</template>

<script>
export default {
  props: {
    loginState: {
      type: String,
      default: "toLogin",
    },
    headerStyle: {
      type: String,
      default: "dark",
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style>
#header .header-btn{
  margin-left: 595px;
}
#header .header-btn .btn{
  background-color: #4e6ef2;
  padding: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  border: 1px solid #4e6ef2;
  box-shadow: 0 0 10px #4e6ef2;
  color: white;
}
#header .header-btn a:hover {
  color: #ddf;
}
#header .navbar-brand {
  font-size: 30px;
  /* font-weight: bold; */
  font-family: "微软雅黑";
}
</style>
